<template>
    <div class="pm-distribution">
      <h3 class="title">项目分布</h3>
      <div class="container" id="container" :style="{height:containerHeight}">
        <div class="left">
          <div class="top">
            <div class="item fl" style="float: left;width: 220px;">
              <a-input placeholder="请输入项目名称" v-model="pname" style="width: 200px;"></a-input>
            </div>
            <!--查询-->
            <div class="item query-submit fl" @click="search" style="float: left">
              <i class="el-icon-search"></i> 查 询
            </div>
          </div>
          <div class="header">共{{markersall.length}}个项目</div>
          <div class="list" :style="{height:leftHeight}">
            <div class="list-context">
              <div ref="box" class="list-scroll bmr-y-scroll":style="{height:leftHeight}">
                <!-- 项目列表-->
                <div class="listItemDIV">
                  <div class="row" v-for="marker of markersall" :key="marker.code" @click="lookDetail(marker,'left')" :class="{active: activeName == marker.name}">
                    <div
                      class="head-title" v-text="marker.name" :title="marker.name"></div>
                    <div class="row-content">
                      <span class="item fl"><i class="iconfont nhjc-dianli electricity"></i>项目编号：{{marker.code}}</span>
                      <span class="item fl"><i class="iconfont nhjc-dianli electricity"></i>项目地址：{{marker.address}}</span>
                    </div>
                  </div>
                  <div style="clear:both;"></div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;height: 45px;background-color: #ffffff;margin-top: 10px;">
           <div style="width: 32%;height: 45px;float: left;line-height: 45px;padding-left: 5px;">
             <img src="../../assets/cqb/green.png" /><!--  #0FCD55-->
             <span style="margin-left: 5px;font-weight: bolder;">进度正常</span>
           </div>
            <div style="width: 32%;height: 45px;float: left;line-height: 45px;padding-left: 5px;">
              <img src="../../assets/cqb/orenge.png" /><!--  #CD580F-->
              <span style="margin-left: 5px;font-weight: bolder;">进度完结</span>
            </div>
            <div style="width: 32%;height: 45px;float: left;line-height: 45px;padding-left: 5px;">
              <img src="../../assets/cqb/red.png" /><!--  #F91522-->
              <span style="margin-left: 5px;font-weight: bolder;">进度延期</span>
            </div>

          </div>
        </div>
        <div class="right-context" id="right-context">
          <baidu-map :style="{width:map.width,height:map.height}" class="map" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true">
            <!--比例尺控件-->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!--缩放控件-->
            <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
            <!--聚合动态添加的点坐标-->
            <!--<bm-marker-clusterer :averageCenter="true">
              <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)"></bm-marker>
            </bm-marker-clusterer>-->

            <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}"
                       @click="lookDetail(marker)" :icon="{url: require('@/assets/cqb/green.png'), size: {width: 25, height: 25}}"></bm-marker>
            <bm-marker v-for="marker of markers1" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}"
                       @click="lookDetail(marker)" :icon="{url: require('@/assets/cqb/orenge.png'), size: {width: 50, height: 50}}"></bm-marker>
            <bm-marker v-for="marker of markers2" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}"
                       @click="lookDetail(marker)" :icon="{url: require('@/assets/cqb/red.png'), size: {width: 50, height: 50}}"></bm-marker>
            <!--信息窗体-->
            <bm-info-window :position="{lng: infoWindow.lng, lat: infoWindow.lat}" :title="infoWindow.name"
                           :width="600" :height="400" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
              <img src="../../assets/daiban.png" />


            </bm-info-window>
          </baidu-map>
        </div>
      </div>
    </div>
</template>

<script>
  //百度地图
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmScale from 'vue-baidu-map/components/controls/Scale'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

  export default {
    name: "IndexMap",
    components: {
      BaiduMap,
      BmScale,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
      BmInfoWindow
    },
    data() {
      return {
        pname:'',
        districtType: 0,//行政区域
        buildType: 0,//项目类型
        buildId: '',//项目ID
        searchParams:{
          regions:0,//区域编号
          proType:0,//项目类型
          proCode:'',//项目编号
        },
        markersall: [],
        markers:[{
          name: '拆迁区域1',
          code: '1000216',
          address: '南京市浦口区明发城市广场1楼...',
          lng: 118.60925,
          lat: 32.056451
        }, {
            name: '拆迁区域2',
            code: '3453543',
           address: '南京市浦口区明发城市广场2楼...',
            lng: 118.555496,
            lat:32.101731
          }, {
          name: '拆迁区域3',
          code: '8563453',
          address: '南京市浦口区明发城市广场3楼...',
          lng: 118.55837,
          lat:32.05082
        }],
        markers1:[{
          name: '拆迁区域4',
          code: '3245431',
          address: '南京市浦口区明发城市广场4楼...',
          lng: 118.676515,
          lat:32.059878
        }, {
          name: '拆迁区域5',
          code: '7976574',
          address: '南京市浦口区明发城市广场5楼...',
          lng: 118.628223,
          lat:32.10271
        }],
        markers2:[{
          name: '拆迁区域6',
          code: '3245356',
          address: '南京市浦口区明发城市广场6楼...',
          lng: 118.61385,
          lat:32.006984
        }, {
          name: '拆迁区域7',
          code: '6834554',
          address: '南京市浦口区明发城市广场7楼...',
          lng: 118.557508,
          lat:32.000125
        }],
        map:{
          center: {lng: 118.635372,lat:32.06507},//'南京市浦口区',
          zoom: 13,
          width: '98%',
          height:'700px'
        },
        infoWindow: {
          name: "详情展示",
          lng: 118.557508,
          lat:32.000125,
          show: false,
          info:{
            air: 0,
            area: 12313,
            areaEnergy: 0.64,
            code: "440300A055",
            energy: 7922.66,
            lng: 118.638372,
            lat:32.06507,
            water: 0
          },
        },
        activeName: '',
        leftHeight:'540px',
        containerHeight:'700px'
      }
    },
    mounted(){
      this.markersall = this.markersall.concat(this.markers).concat(this.markers1).concat(this.markers2);
    },
    methods:{
      lookDetail(maker,type){
        this.activeName = maker.name;
        this.infoWindow.lng = maker.lng;
        this.infoWindow.lat = maker.lat;
        this.infoWindow.show = true;
      },
      search(){

      },
      handler({ BMap, map }){
        console.log(BMap, map);
        //let mapStyle = { style: "midnight" };
        //map.setMapStyle(mapStyle); //百度提供的 https://developer.baidu.com/map/custom/list.htm
         //this.map.center.lng = 118.802422
         //this.map.center.lat = 32.065631
        // this.map.zoom = 12;
        // this.map.width= document.getElementById("container").clientWidth-330+'px'
        // this.map.height=document.body.clientHeight -160+'px'
      },
      infoWindowClose(){

      },
      infoWindowOpen(){

      }
    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>
  $bgBlueColor: #1881bf;
  h3.title {
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    font-weight: 600;
    padding: 0 0 0 30px;
    border: 1px #E5EEF3 solid;
    color: #2274A4;
    background: #F5F9F9;
    width: 100%;
    text-align: left;
  }
  .container {
    margin: 0 auto;
    min-width: 1366px;
    padding: 0px;
    min-height: 710px;
    .left {
      width: 25%;
      float: left;
      height: 720px;
      .header {
        width: 100%;
        clear: left;
        height: 34px;
        line-height: 34px;
        color: black;
        background: #F5F9F9;
        padding-left: 20px;
      }
      .top {
        height: 70px;
        padding: 8px 5px 12px 5px;
      }
    }
    .right-context {
      float: left;
      width: 74%;
    }
    .item {
      margin: 5px;
      height: 28px;
      line-height: 28px;
      .electricity{
        color: #FFD670;
      }
      .water{
        color:#4EB9DB;
      }
      .air{
        color:#F39795;
      }
      .iconfont{
        font-size: 22px;
      }
    }
    .query-submit {
      width: 90px;
      border-radius: 28px;
      background: $bgBlueColor;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    .list{
      .item{
        width: 27%;
        height: 30px;
        line-height: 30px;
        display: block;
      }
      .item.fl{
        float: left;
      }
      .list-context{
        border-radius:5px;margin-top:10px;background:white;
        .list-scroll{
          margin-top:10px;overflow-y:auto;min-height:537px;overflow-x: hidden;
          .row{
            float:left;width:100%;
            cursor: pointer;
            .head-title{
              overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:16px;color:#1781BF;font-weight:400; padding-left: 20px;
              height: 30px;
              line-height: 30px;
            }
            .row-content{
              overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-bottom:10px;font-size:12px;color:rgb(128, 128, 128);
              border-bottom: 1px solid #eee; padding-left: 10px;
            }
          }
          .row.active{
            background-color: #CFDDF3;
          }
        }
      }
    }
    .map{
      min-width: 800px; width:1000px;height:720px;float:left;background:white;border-radius:5px;margin-left:10px;
      .right{
        text-align: left;
      }
      .left{
        width: 100px;
      }
    }

  }
</style>
<style lang="scss">
  .pm-distribution{
    .BMap_bubble_title {
      color: #2DB7F5 !important;
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 8px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      width: 220px !important;
    }
    .BMap_shadow{
      display:none;
    }


  }
</style>